<template>
    <div class="index">
        <el-button @click="showAdd()" type="success" class="add">新增</el-button>
        <Info @update="update" ref="info" :info="info"></Info>
        <Lis @edit="edit" ref="list"></Lis>
    </div>
</template>

<script>
import Info from './info.vue'
import Lis from './Lis.vue'
export default {
    data(){
        return{
            info:{
                // 弹窗是否提示
                isShow:false,
                // 弹窗类型---新增或者修改
                type:'add'
            }
        }
    },
    components:{
        Info,
        Lis
    },
    methods:{
        edit(data){
             // 打开新增弹窗
            this.info.isShow = true
            this.info.type = 'adit'
            this.$refs.info.setVal(data)
        },
        update(){
            // 发生这个事件 就执行这个函数 此时 需要更新list中的数据
            this.$refs.list.getList()
        },
        showAdd(){
            // 打开新增弹窗
            this.info.isShow = true
            this.info.type = 'add'
            this.$refs.info.setVal({
                pid: 0,
                title: "",
                icon: "",
                type: 1,
                url: "",
                status: 1
            })
        }
    },
}
</script>

<style>
.index .add{
    margin: 10px;
}
</style>